<template>
  <div class="f-all">
    <div class="he-all">
      <div class="header">
        <div
          class="el-icon-arrow-left"
          style="font-size:25px;margin-top:0.8rem;color:rgb(243, 242, 242)"
          @click="tiaoshou()"
        ></div>
        <div class="f-zi">返回</div>
        <div class="f-zi1" @click="outLogin()">退出登录</div>
      </div>

      <div class="f-one">
        <div class="f-tou">
          <img :src="this.img[0].name" class="f-tou-img" style="width:9rem; height:9rem;" />
          <!-- <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>-->

          <el-upload
            class="upload-demo"
            action="api/pic/load"
            :headers="userToken"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :on-success="handleSuccess"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :show-file-list="false"
          >
            <div style="color:black;font-size:20px;margin-top:-10px;">{{this.username}}</div>

            <el-button type="submit" size="mini">
              修改头像
              <i class="el-icon-upload el-icon--right"></i>
            </el-button>
          </el-upload>
        </div>
        <!-- <div class="f-tou2">
        <div class="f-tou2-1">
          用户名:
          <div style="color:#4EA4FB;margin-top:5px">{{this.username}}</div>
        </div>
       
        </div>-->
      </div>
    </div>
    <div class="f-two">
      <div class="f-two1">
        <span class="two1-zi">
          用户账号 :&nbsp;
          <span class="two1-zi-2">{{this.admin_account}}</span>
        </span>
      </div>
      <div class="f-two1">
        <span class="two1-zi">
          用户职务 : &nbsp;
          <span class="two1-zi-2">{{this.job_name}}</span>
        </span>
      </div>
      <div class="f-two1">
        <span class="two1-zi">
          所属单位 : &nbsp;
          <span class="two1-zi-2">{{this.group_name}}</span>
        </span>
      </div>
      <!-- <div class="f-two1">
        <span class="two1-zi">
          登录密码 : &nbsp;
          <span class="two1-zi-2">{{this.admin_password}}</span>
        </span>
      </div> -->
      <div class="f-two1">
        <span class="two1-zi">
          手机号码 : &nbsp;
          <span class="two1-zi-2">{{this.people_tele}}</span>
        </span>
      </div>

      <div class="f-two1">
        <span class="two1-zi">
          注册时间 : &nbsp;
          <span class="two1-zi-2">{{this. admin_time}}</span>
        </span>
      </div>
      <div class="f-two1">
        <span class="two1-zi">
          上次登陆时间 : &nbsp;
          <span class="two1-zi-2">{{this.admin_lastlogintime}}</span>
        </span>
      </div>
    </div>
  </div>
</template>
<script>
import http from '../api';
export default {
  data() {
    return {
      username: '',
      userToken: {}, //usertoken的值
      img: [{ name: '' }],
      people_id: '',
      job_name: '', //职务名称
      group_name: '', //所属单位
      people_tele: '', //电话
      people_created: '',
      admin_time: '', //注册时间
      admin_password: '', //登录密码
      admin_account: '', //用户名
      admin_lastlogintime: '', //上次登陆时间
      // 上传头像
      imageUrl: '',
    };
  },
  mounted() {
    // 获取usertoken
    this.username = sessionStorage.getItem('people_name');
    this.userToken.userToken = sessionStorage.getItem('userToken');
    this.people_id = sessionStorage.getItem('people_id');
    http.getBuildPeople({ people_id: this.people_id }).then((r) => {
      console.log('1', r);
      this.job_name = r.data.buildJob.job_name;
      this.group_name = r.data.buildGroup.group_name;
      this.people_tele = r.data.people_tele;
      this.people_created = r.data.people_created;
      this.img[0].name = r.data.people_url;
      //   this.downinput = r.data;
      //   console.log(this.downinput);
    });
    http.getBuildAdmin({ people_id: this.people_id }).then((r) => {
      console.log('2', r);
      this.admin_lastlogintime = r.data.admin_lastlogintime;
      this.admin_time = r.data.admin_time;
      this.admin_password = r.data.admin_password;
      this.admin_account = r.data.admin_account;
      //   this.downinput = r.data;
      //   console.log(this.downinput);
    });
  },
  methods: {
    //   跳转首页
    tiaoshou() {
      this.$router.push({
        name: '主页',
      });
    },
    // 退出登录
    outLogin() {
      sessionStorage.removeItem('userToken');
      sessionStorage.removeItem('people_id');
      sessionStorage.removeItem('people_name');
      sessionStorage.removeItem('people_url');
      this.$router.push({
        name: '登录',
      });
    },
    // 成功
    handleSuccess(res, file, fileList) {
      console.log('文件', res);
      this.img[0].name = res.name;
      this.$notify.success({
        title: '成功',
        message: `文件上传成功`,
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
  },
};
</script>
<style scoped>
/* 上传头像 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 2.8rem;
  color: #8c939d;
  width: 10rem;
  height: 10rem;
  line-height: 10rem;
  text-align: center;
  border-radius: 50%;
  background-color: violet;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.f-all {
  width: 100%;
  /* width: 1300px; */
  /* height: 645px; */
  height: 60rem;
  /* background-color: white; */
  overflow-y: scroll;
  /* overflow: hidden; */
}
.header {
  display: flex;
  /* background-color: #50c7ef; */
  background-image: linear-gradient(to right, rgba(63, 114, 186, 0.7), #5098eb);
  line-height: 4.5rem;
  height: 4.5rem;
}
.he-all {
  background-image: linear-gradient(to right, rgba(63, 114, 186, 0.7), #5098eb);
}
.f-zi {
  /* margin-top: 10px; */
  font-size: 17px;
  /* text-align: center; */
  color: rgb(243, 242, 242);
  /* background-color: rgb(84, 146, 196,0.7); */
  /* height: 4.5rem; */
  line-height: 4.5rem;
  /* font-weight: 700; */
  /* margin-left: 15px; */
}
.f-zi1 {
  font-size: 17px;
  margin-left: 25rem;
  color: white;
}
.f-one {
  width: 100%;
  height: 17rem;
  /* margin-left: 40px; */
  /* background-color: #50c7ef; */
  background-image: linear-gradient(to right,rgba(63, 114, 186, 0.7), #5098eb);
  /* margin-top: 20px; */
  display: flex;
}
.upload-demo {
  /* margin-top: 20px;
  margin-left: 25px; */
  margin-top: 1.2rem;
  /* margin-left: 1rem; */
}
.f-tou {
  width: 10rem;
  height: 10rem;
  /* width: 155px; */
  /* height: 170px; */
  margin: 0 auto;
  /* margin-left: 1.3rem;
  margin-top: 1rem; */
  /* border: 1px solid rgb(221, 221, 221); */
  border-radius: 50%;
}
.f-tou-img {
  /* margin-top: 7px;
  margin-left: 5px; */
  border-radius: 50%;
}
.f-tou2 {
  width: 30rem;
  height: 13rem;

  margin-left: 10px;
  color: rgb(250, 250, 250);

  font-size: 16px;
}
.f-two {
  width: 93%;
  /* margin-top: 10px; */
  /* height: 200px; */
  /* background-color: chocolate; */
  /* margin-left: 37px; */
}
.f-two1 {
  width: 100%;
  height: 5.5rem;
  margin-left: 10px;
  /* 字变成...的样式代码 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /* background-color: cornflowerblue; */
  border-top: 1px solid rgb(224, 224, 224);
}
.two1-zi {
  font-size: 17px;
  /* font-weight: 600; */
  margin-top: 1.5rem;
  display: block;
}
.f-tou2-1 {
  margin-top: 1.3rem;
}
.two1-zi-2 {
  color: rgb(175, 175, 175);
}
</style>